<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布闲置</title>
    <script src="../../static/js/axios-0.18.0.js"></script>
    <script src="../../static/plugins/echarts/echarts.js"></script>
    <script src="../../static/js/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        .avatar {
            width: 100px;
            height: 100px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form ref="commdata" :model="commdata" :rules="rules" label-position="right" label-width="100px">
        <el-row>
            <el-form-item label="商品名" prop="commname">
                <el-input
                        type="text"
                        placeholder="请输入商品名"
                        v-model="commdata.commname"
                        maxlength="20"
                        show-word-limit
                >
                </el-input>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="商品简介" prop="commdesc">
                <el-input
                        type="textarea"
                        placeholder="请输入内容,出售原因......."
                        :autosize="{minRows:5,maxRows:10}"
                        v-model="commdata.commdesc"
                        maxlength="50"
                        show-word-limit
                >
                </el-input>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="商品原价" prop="orimoney">
                <el-input type="number"
                placeholder="请输入原价"
                v-model="commdata.orimoney"
                          show-word-limit
                >
                </el-input>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="商品现价" prop="thinkmoney">
                <el-input type="number"
                          placeholder="请输入现价"
                          v-model="commdata.thinkmoney"
                          show-word-limit
                >
                </el-input>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="商品类别" prop="category">
                <el-select v-model="commdata.category" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="商品属性" prop="common">
                <!--2个单选框-->
                <el-radio v-model="commdata.common" label="可快递" border size="medium">可快递</el-radio>
                <el-radio v-model="commdata.common" label="只自提" border size="medium">只自提</el-radio>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="上传主图" prop="image">
                <el-upload
                        class="avatar-uploader"
                        action="/commodity/upload"
                        :auto-upload="autoUpload"
                        name="image"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-picture-outline avatar-uploader-icon"></i>
                    <div slot="tip" class="el-upload__tip">只能上传jpg或png文件，且不超过2048kb</div>
                </el-upload>
            </el-form-item>
        </el-row>
        <el-row>
            <el-form-item  label="详情图" prop="imagelist">
                <el-upload
                        class="upload-demo"
                        action="/commodity/imagelist"
                        :limit="maxUpload"
                        :before-upload="handlePreview"
                        :auto-upload="autoUpload"
                        :on-remove="handleRemove"
                        :on-success="handleListSuccess"
                        :file-list="fileList"
                        :on-exceed="exceed"
                        :multiple="autoUpload"
                        name="file"
                        list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb,最多3张图片</div>
                </el-upload>
            </el-form-item>
        </el-row>
        <el-row>
            <el-button type="success" @click="submit">提交</el-button>
        </el-row>
    </el-form>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            autoUpload:true,
            imageUrl:null,
            maxUpload:3,
            commdata:{
                imageList:"",
            },
            fileList:[],
            rules: {
                commname:[{required:true,message:'标题为必填项',trigger:'blur'},
                    {min:3,max:20,message:'标题长度在3-20个字符',trigger:'blur'}],
                commdesc:[{required:true,message:'商品简介为必填项',trigger:'blur'}],
                thinkmoney:[{required:true,message:'商品现价为必填',trigger:'blur'}],
                image:[{required:true,message:'必须上传主图片',trigger:'blur'}],
                category:[{required:true,message:'请选择商品属性'}],
                thinkmoney:[{required:true,message:'请输入现价',trigger:'blur'},
                    {min:0,max:99999999,message:'商品原价格不能低于0'}],
                orimoney:[{required:true,message:'请输入原价',trigger:'blur'},
                    {min:0,max:99999999,message:'商品现价格不能低于0'}],
                common:[{required:true,message:'请选择类别',trigger:'blur'}]
            },
            options: [{ //商品类别
                value: '电子数码',
                label: '电子数码'
            }, {
                value: '图书',
                label: '图书'
            }, {
                value: '旅游',
                label: '旅游'
            }, {
                value: '生活',
                label: '生活'
            },{
                value: '服装',
                label: '服装'
            },{
                value: '化妆',
                label: '化妆'
            },{
                value: '其他',
                label: '其他'
            }
            ]
        },
        methods: {
            //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
            handleAvatarSuccess(response,file) {
                this.imageUrl="http://qsazz6un4.hd-bkt.clouddn.com/"+response.data;
                this.$message({
                    type:response.flag ? 'success' : 'error',
                    message:response.message
                })
                //设置form表单中的img数据，为后来提交到数据库做准备
                this.commdata.image = response.data;
            },
            //上传图片之前执行
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg'|| file.type === "image/png";
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传图片只能是JPG或者PNG格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //详情图上传之前的方法
            handlePreview(fileList){
                const sizeflag = Object.keys(fileList).length < 4;
                console.log(Object.keys(fileList).length);
                if(!sizeflag){
                    this.$message.error("最多上传3张图片");
                }
                return sizeflag;
            },
            //详情图上传成功
            handleListSuccess(response){
                this.$message({
                    type:response.flag ? 'success' : 'error',
                    message:response.message
                })
                //设置form表单中的imglist数据，为后来提交到数据库做准备
                console.log(response.data);
                this.commdata.imageList += (response.data + ",");
            },
            //上传图片超出的函数
            exceed(){
                this.$message.error("上传最多3张图片");
            },
            //删除图片的方法
            handleRemove(file){
                /*axios.post("/commodity/removeImage",file).then((res)=>{
                    if(res.data.flag){
                        //删除成功
                        this.$message.success("删除成功");
                    }else{
                        this.$message.error("删除失败");
                    }
                }).catch(()=>{
                    this.$message.error("删除失败");
                })*/
            },
            //提交
            submit(){
                this.$refs['commdata'].validate((valid)=>{
                    if(valid){
                        axios.post("/commodity/submit",this.commdata).then((res)=>{
                            if(res.data.flag){
                            this.$message.success("添加商品成功");
                            this.resetForm();
                        }else{
                            this.$message.error("提交出错");
                        }
                    }).catch(()=>{
                            this.$message.error("提交出错");
                    })
                    }else{
                        //请检查表单
                        this.$message.error("校验数据失败，请检查");
                    }
            })
            },
            // 重置表单
            resetForm() {
                this.commdata = {};
                this.imageUrl = null;
                this.fileList = [];
            },
        }
    })
</script>
</html>